<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" th:href="@{/css/base.css}"/>
    <link rel="stylesheet" th:href="@{/css/info-reg.css}"/>
    <title>选课系统</title>
    <style type="text/css">
        .error {
            color: Red;
            font-size: 13px;
            margin-left: 5px;
            padding-left: 16px;
        }
    </style>
</head>
<body>
<div class="title">
    <h2>个人信息修改(*为必填项)</h2>
</div>
<form id="fm" method="post" action="/student/update">
    <div class="main">
        <p class="short-input ue-clear">
            <label>*学号：</label>
            <input name="name" type="text" disabled th:value="${student.username}"/>
        </p>
        <p class="short-input ue-clear">
            <label>*姓名：</label>
            <input name="name" type="text" disabled th:value="${student.name}"/>
        </p>
        <p class="short-input ue-clear" id="xingbie">
            <label>*性别：</label>
            <select name="sex" style='width:200px;height:30px;border:1px solid #C5D6E0'>
                <option th:selected="${student.sex} == 0" value="0">女</option>
                <option th:selected="${student.sex} == 1" value="1">男</option>
            </select>
        </p>
        <p class="short-input ue-clear">
            <label>*出生日期：</label>
            <input name="birthday" type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"
                   th:value="${#dates.format(student.birthday, 'yyyy-MM-dd')}"/>
        </p>
        <p class="long-input ue-clear">
            <label>学校：</label>
            <input name="school" disabled type="text" th:value="${student.school}"/>
        </p>
        <p class="long-input ue-clear">
            <label>*联系方式：</label>
            <input name="phone" type="text" th:value="${student.phone}"/>
        </p>
        <p class="long-input ue-clear">
            <label>电子邮箱：</label>
            <input name="email" type="text" th:value="${student.email}"/>
        </p>
        <input name="id" type="hidden" th:value="${student.id}">
        <div class="btn ue-clear">
            <input style="height:50px;width:150px;background-color:#68B86C;color:white;border-radius:10px" type="button" value="修改" onclick="update()"/>
        </div>
    </div>
</form>
</body>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<script type="text/javascript" th:src="@{/js/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.validate.min.js}"></script>
<script type="text/javascript">

    function update() {
        $.ajax({
            url: "../student/update",
            type: "post",
            dataType: "json",
            data: $("form").serialize(),
            success: function (data) {
                alert(data.msg);
            }
        });
    }

    $("#fm").validate({
        rules: {
            name: {
                required: true
            },
            birthday: {
                required: true
            },
            school: {
                required: true
            },
            phone: {
                required: true
            }
        },
        messages: {
            name: {
                required: "*不能为空！"
            },
            birthday: {
                required: "*不能为空！"
            },
            school: {
                required: "*不能为空！"
            },
            phone: {
                required: "*不能为空！"
            }
        }
    });
</script>

</html>
